<template>
  <span class="num">{{an}}</span>
</template>

<script>
import gsap from 'gsap';

export default {
  props: {
    value: Number,
    fixed: Number,
  },
  data() {
    return {
      n: 0,
    };
  },
  watch: {
    value(n) {
      this.gsap(n);
    },
  },
  computed: {
    an() {
      return this.n.toFixed(this.fixed || 0);
    },
  },
  methods: {
    gsap(n) {
      gsap.to(this.$data, { duration: 3, ease: 'expo.inOut', n });
    },
  },
  mounted() {
    if (this.value) {
      this.gsap(this.value);
    }
  },
};
</script>
